<template>
  <div class="infinite-list-wrapper">
    <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled">
      <li
          v-for="item in items"
          :key="item.id"
          @click="handleClick(item)"
          class="button-style list-item"
          :style="{ color: getItemColor(item) }">
        {{ item.text }}
      </li>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </ul>
  </div>
</template>

<script>
export default {
  name: "trainList_beiyong",
  data() {
    return {
      count: 10,
      loading: false,
      items: [
        {id: 1, text: 'Item 1', status: 'active'},
        {id: 2, text: 'Item 2', status: 'active'},

      ],
    }
  }, computed: {
    noMore() {
      return this.items.length >= 30
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    load() {

      this.loading = true;
      setTimeout(() => {
        // 模拟加载新项目
        const tempItems = [{id: this.items.length + 1, text: 'New Item', status: 'active'}];
        this.items = [...this.items, ...tempItems];
        this.loading = false;
      }, 2000);
    },
    handleClick(item) {
      console.log('Clicked on:', item);
      // 实现页面跳转或其他逻辑
    },
    getItemColor(item) {
      if (item.status === 'active') {
        return 'green';
      } else if (item.status === 'inactive') {
        return 'red';
      }
      return 'grey';
    }

  }
}
</script>

<style scoped>

</style>
